<div class="container">
    <div class="jumbotron">
        <div class="row">
            <div class="col-md-6">
                <h1>AngularJS</h1>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="run" ng-click="$ctrl.run()">Create 1,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="runlots" ng-click="$ctrl.runLots()">Create 10,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="add" ng-click="$ctrl.add()">Append 1,000 rows</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="update" ng-click="$ctrl.update()">Update every 10th row</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="clear" ng-click="$ctrl.clear()">Clear</button>
                    </div>
                    <div class="col-sm-6 smallpad">
                        <button type="button" class="btn btn-primary btn-block" id="swaprows" ng-click="$ctrl.swapRows()">Swap Rows</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <table class="table table-hover table-striped test-data">
        <tbody>
        <tr ng-repeat="item in $ctrl.data track by item.id" ng-class="{ danger: item.id === $ctrl.selected }">
            <td class="col-md-1">{{item.id}}</td>
            <td class="col-md-4">
                <a ng-click="$ctrl.select(item)">{{item.label}}</a>
            </td>
            <td class="col-md-1"><a ng-click="$ctrl.del(item)"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
            <td class="col-md-6"></td>
        </tr>
        </tbody>
    </table>
    <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
</div>